<cfcomponent output="false">
	
	<!--- --->
	
	<cffunction name="renderLeft" access="public" output="true" returntype="string">
		
		<cfset var local = {} />
		
		<cfsavecontent variable="local.result">
				#renderSession()#
				
				<!--- <div id="module-left-messages-div" class="module-left-element moveable">
					<table cellspacing="0" cellpadding="0">
						<tr>
							<td style="vertical-align:top;"><i style="font-size:19px;color:rgb(152, 187, 224);" class="fa fa-envelope"></i>4 Messages</td>
							<td style="vertical-align:top;"><i style="font-size:19px;color:rgb(247, 221, 87);" class="fa fa-warning"></i>1 Notification</td>
						</tr>
					</table>
					<div class="module-left-element-basebar"></div>
				</div> --->

				#$.run.it('leftView.renderSecretary')#

				#$.run.it('importantView.renderSidebar')#
				
				#$.run.it('leftView.renderUpcomingMilestones')#
				
		</cfsavecontent>
		
		<cfreturn $.render.clean(local.result) />
	</cffunction>
	
	<!--- --->
		
	<cffunction name="renderRight" access="public" output="true" returntype="string">
		
		<cfset var local = {} />
		
		<cfsavecontent variable="local.result">
				
				#$.run.it('discussionView.renderSupportFeedback')#
				
				#$.run.it('leftView.renderHelpWidget')#
								
				#$.run.it('leftView.renderCalendar')#
				
				#$.run.it('leftView.renderChangelog')#
				
				<!--- #$.run.it('leftView.renderGroup')# --->

		</cfsavecontent>
		
		<cfreturn $.render.clean(local.result) />
	</cffunction>
	
	<!--- --->
	
	<cffunction name="renderSession" access="public" output="true" returntype="string">
		
		<cfset var local = {} />
		
		<cfset local.user = $.run.it('craftivityService.getUser', {userID=request.session.user.id}) />
		<cfset local.business = $.run.it('craftivityService.getBusiness', {userID=local.user.id}) />
		
		<cfsavecontent variable="local.result">
			<div id="module-left-logo-div" class="module-left-element first">
				#$.render.form(name='logout_form',method='craftivityController.logout')#
					<input type="hidden" id="logoutMessage" name="message" value="Logout Successful" />
					<a class="logout" onclick="javascript:$('##logout_form').submit();"><i class="fa fa-power-off"></i>log out</a>
				</form>
				<div class="module-left-center">
					<a href="#$.site.getVar('rootURL')#/dashboard.cfm" style="position:relative;" class="craftivity-logo">
						<!--- #$.render.img(path="craftivity/logo.png",style="height:43px;cursor:pointer;")# --->
						<img id="craftivityLogo" src="/craftivity/assets/landingPage/logo-beta.png" style="height:43px;cursor:pointer;" />
						<span class="reload">Go to dashboard</span>
					</a></br>
					
					<cfset local.full_name = $.format.full_name(first_name=local.user.first_name,middle_name=local.user.middle_name,last_name=local.user.last_name) />
					
					<cfif local.full_name neq ''>
						<div style="font-weight:normal;" class="user">#local.full_name#</div>
					</cfif>
					
					<div>
						<cfif local.business.name eq ''>
							- Business Name not set up -
						<cfelse>
							#local.business.name#
						</cfif>
					</div>
					
					<!--- <div id="module-left-business-tag-div">
						jewelry - fulltime - $10k-$50k
					</div> --->
				</div>
				<div class="module-left-element-basebar"></div>
			</div>
		</cfsavecontent>
		
		<cfreturn $.render.clean(local.result) />
	</cffunction>
	
	<!--- --->
	
	<cffunction name="renderCalendar" access="public" output="true" returntype="string">
		
		<cfset var local = {} />
		
		<cfset local.business = $.run.it('craftivityService.getBusiness',{userID=request.session.user.id}) />
		<cfset local.options = $.site.getOptions('calendar') />

		<!--- don't show timezone picker on the setup page --->
		<cfif local.business.timezone eq "" and not cgi.script_name contains "setup.cfm">
			<cfreturn $.run.it('calendarView.renderTimezoneLeft') />
		</cfif>
		
		<cfset local.today = $.date.getDate() />
		<cfset local.nextMonth = dateAdd('m',1,local.today) />
		<cfset local.lastMonth = dateAdd('m',-1,local.today) />
		
		<cfset local.nextYear = year(local.nextMonth) />
		<cfset local.lastYear = year(local.lastMonth) />
		
		<cfset local.nextMonth = month(local.nextMonth) />
		<cfset local.lastMonth = month(local.lastMonth) />
		
		<cfif local.nextMonth lt 10>
			<cfset local.nextMonth = '0' & local.nextMonth />
		</cfif>
		<cfif local.lastMonth lt 10>
			<cfset local.lastMonth = '0' & local.lastMonth />
		</cfif>
		
		<!--- load one month ahead, and one month before --->
		<cfset local.startDate = local.lastMonth & '/01/' & local.lastYear />
		<cfset local.nextMonthDate = createDate(local.nextYear,local.nextMonth,1) />
		<cfset local.endDate = local.nextMonth & '/' & daysInMonth(local.nextMonthDate) & '/' & local.nextYear />
		
		<!--- catch that mofo of a bug --->
		<cfif local.startdate eq '06/31/2014' or local.enddate eq '06/31/2014'>
			<cfdump var="06/31/2014?!?!">
			<cfdump var="#local#">
			<cfdump var="#arguments#"><cfabort>
		</cfif>

		<cfset local.events = $.run.it('calendarService.getEvents',{startdate=local.startdate,enddate=local.enddate}) />
		
		<cfsavecontent variable="local.result">
			<div id="module-left-calendar-div" class="module-left-element moveable">
				<div class="kalendar-element" style="height:217px;"></div>
				<div class="kalendar-event-edit hidden">
					<div class="day-header">
						<div class="day-date">Feb 13</div>
						<div class="widget-title">Thursday</div>
						<div class="day-year">2014</div>
					</div>
					#application.v.calendarView.renderEvent(id="",date="01/01/2013",categories="test,test,test,test,test,test",requested_date="01/01/2013",redirect=false)#
				</div>
				<div class="module-left-element-basebar"></div>
				<input name="KalendarToday" type="hidden" value="#$.date.getDate()#" />
			</div>
			
			<script>
				<!--- copy options.google_calendars to JS for mini calendar --->
				<cfif structCount(local.options.google_calendars) gt 0>

					<cfloop collection="#local.options.google_calendars#" item="local.item" index="local.i">
						<cfif structKeyExists(local.item,"name")>
							Kalendar.googleCalendars['#local.i#'] = '#local.item.name#';
						<cfelse>
							Kalendar.googleCalendars['#local.i#'] = '#local.item#';
						</cfif>
					</cfloop>
				</cfif>
				Kalendar.events = {};
				Kalendar.eventsParsed = [];
				
				<cfloop query="local.events">
					<!--- localize the UTC datetime --->
					<cfset local.event_start = $.date.applyLocalization(local.events.start_date & ' #local.events.start_time#') />
					<cfset local.event_stop = $.date.applyLocalization(local.events.start_date & ' #local.events.stop_time#') />
					<!--- format for renderEvent() --->
					<cfset local.event_date = dateFormat(local.event_start,'mm/dd/yyyy') />
					<cfset local.event_starttime = timeFormat(local.event_start,'HH:mm:ss') />
					<cfset local.event_stoptime = timeFormat(local.event_stop,'HH:mm:ss') />
					
					Kalendar.addEvent(
						'#local.event_date#',
						'#local.event_starttime#',
						'#local.event_stoptime#',
						'#rereplace($.format.paragraph(local.events.description,false,true),"'","\'","ALL")#',
						'#rereplace(local.events.category,"'","\'","ALL")#',
						'#local.events.id#',
						'#local.events.google_calendar_link#',
						'#local.events.google_event_id#',
						'#local.events.google_calendar_id#'
					);

				</cfloop>
				<cfset local.thisMonth = month(local.today) /><cfif local.thisMonth lt 10><cfset local.thisMonth = '0' & local.thisMonth /></cfif>
				$(document).ready(function(){
					var $kalendar = $(".kalendar-element");
					if($kalendar.length > 0){
						$(".kalendar-element").kalendar();
					}
					Kalendar.addMonthLoaded('#local.lastMonth#','#local.lastYear#',1);
					Kalendar.addMonthLoaded('#local.thisMonth#','#year(local.today)#',1);
					Kalendar.addMonthLoaded('#local.nextMonth#','#local.nextYear#',1);
					Kalendar.initiateKalendar();
					Calendar.activateEvents();
				});
			</script>
		</cfsavecontent>
		
		<cfreturn $.render.clean(local.result) />
	</cffunction>
	
	<!--- --->
	
	<cffunction name="renderGroup" access="public" output="true" returntype="string">
		
		<cfset var local = {} />
		
		<cfsavecontent variable="local.result">
			<style>
				.person{
					display:inline-block;
					border-radius:3px;
					background-color:rgb(106, 197, 64);
					padding:2px 4px;
					color:white;
					cursor:pointer;
					font-size:9px;
					margin:2px;
					border:1px solid rgb(158, 158, 158);
				}
				.person.offline{
					background-color:##B8B8B8;
					color:whitesmoke;
				}
				.group-people{
					text-align:left;
					margin-left:3px;
				}
				.module-left-element .feedback-open-messages{
					max-height:200px;
				}
				.module-left-element .feedback-open-message-message{
					font-size:11px;
				}
				
			</style>
			<div id="module-left-group-div" class="module-left-element moveable">
				<div class="module-left-title" style="margin-bottom:0px;">Success Squad</div>
				<fieldset class="group-people">
					<legend>Members:</legend>
					<div class="person">Tim @ Gravity Bar</div>
					<div class="person">Sarah @ Create-a-fist</div>
					<div class="person offline">Phil @ Pity Puppy</div>
					<div class="person offline">Diva @ Petunia</div>
				</fieldset>
				<div class="feedback-open-messages" style="text-align:left;">
					<div class="feedback-open-message">
						<div class="feedback-open-message-who">Tim @ <b>Gravity Bar</b> :</div>
						<div class="feedback-open-message-timestamp">8:12 PM - 3/13/14</div>
						<div class="feedback-open-message-message">Anyone online?</div>
					</div>
					<div class="feedback-open-message you">
						<div class="feedback-open-message-who">Tim @ <b>Gravity Bar</b> :</div>
						<div class="feedback-open-message-timestamp">9:15 PM - 3/13/14</div>
						<div class="feedback-open-message-message">Phil you there? Got a wholesale account I need advice on.</div>
					</div>
					<div class="feedback-open-message">
						<div class="feedback-open-message-who you">Sarah @ <b>Create-a-Fist</b> :</div>
						<div class="feedback-open-message-timestamp">9:20 PM - 3/13/14</div>
						<div class="feedback-open-message-message">Learn 2 use Craftivity. Phil is not online (symbol is grey)</div>
					</div>
				</div>
				<form class="" method="POST" name="add_message_form" id="add_message_form" action="/cfcs/action.cfm?cfc=discussionController&amp;method=saveMessage" onsubmit=""><input type="hidden" name="discussionID" value="2A021F862C104B998A66348300533686">
					<textarea class="feedback-message-textarea" name="message" rows="0"></textarea>
					<button class="right small red" type="submit" name="submit-message" style="margin-top:0px;">Submit</button>
					<div style="clear:both;"></div>
				</form>
				<div class="module-left-element-basebar"></div>
			</div>
		</cfsavecontent>
		
		<cfreturn $.render.clean(local.result) />
	</cffunction>
	
	<!--- --->
	
	<cffunction name="renderSecretary" access="public" output="true" returntype="string">

		<cfset var local = {} />

		<cfset local.now = $.date.applyLocalization(now()) />
		<cfset local.options = $.run.it('optionService.getOptions',{key='secretary'}) />
		
		<!--- get the date ranges --->
		<cfset local.start_date = dateFormat(dateAdd('d',-2,$.date.getDate()),'mm/dd/yyyy') />
		<cfset local.end_date = dateFormat(dateAdd('d',2,$.date.getDate()),'mm/dd/yyyy') />
		<!--- get calendar events --->
		<cfset local.calendar_events = $.run.it('calendarService.getEvents', {
			startdate=dateFormat(dateAdd('d',-2,$.date.getDate()),'mm/dd/yyyy'),
			enddate=dateFormat(dateAdd('d',1,$.date.getDate()),'mm/dd/yyyy')
		}) />
		
		<!--- get the workday ranges --->
		<cfset local.start_day = dayOfWeek(local.start_date) - 1 />
		<cfset local.end_day = dayOfWeek(local.end_date) - 1 />
		<cfset local.days = "" />
		<!--- a codex for when assigning workweek_events --->
		<cfset local.dayToDate = {} />
		<cfset local.safety = 0 />
		<cfloop condition="#local.start_day# neq #local.end_day#">
			<Cfset local.safety++ />
			<cfif local.safety gt 10>
				<cfbreak />
			</cfif>
			<cfset local.days = listAppend(local.days,local.start_day) />
			<cfset local.dayToDate[local.start_day] = local.start_date />
			<Cfset local.start_date = dateFormat(dateAdd('d',1,local.start_date),'mm/dd/yyyy') />
			<cfset local.start_day++ />
			<cfif local.start_day eq 7>
				<cfset local.start_day = 0 />
			</cfif>
		</cfloop>
		<cfset local.days = listAppend(local.days,local.end_day) />
		<cfset local.dayToDate[local.start_day] = local.start_date />

		<!--- get weekday events --->
		<cfset local.workweek_events = $.run.it('workweekService.getWorkweekEvents', {weekdays=local.days, goalAbandoned=false}) />
		
		<!--- build 24 hr struct --->
		<cfset local.times = getSecretaryDateTimeStruct(dateTimeFormat(local.now,'mm/dd/yyyy HH:00:00')) />
		<cfset local.today = dateFormat(local.now,'mm/dd/yyyy') />
		<!--- incorporate workweek_events --->
		<cfloop query="local.workweek_events">
			<cfif local.workweek_events.start_time neq "">
				<cfset local.key = local.dayToDate[local.workweek_events.weekday] & " #local.workweek_events.start_time#" />
				<cfset local.blocks = local.workweek_events.duration / 5 />
				<cfloop from="1" to="#local.blocks#" index="local.i">
					<cfif structKeyExists(local.times,local.key)>
						<cfset local.times[local.key].id = local.workweek_events.id />
						<cfset local.times[local.key].name = local.workweek_events.name />
						<cfset local.times[local.key].type = "workweek" />
						<cfset local.times[local.key].calendar_category = "" />
						<cfset local.times[local.key].calendar_categories = "" />
						<cfset local.times[local.key].calendar_stop = "" />
						<cfset local.times[local.key].calendar_start = "" />
					</cfif>
					<cfset local.key = datetimeFormat(dateAdd('n',5,local.key),'mm/dd/yyyy HH:nn:ss') />
				</cfloop>
			</cfif>
		</cfloop>
		
		<!--- incorporate calendar events --->
		<cfloop query="local.calendar_events">
			<cfset local.start = local.calendar_events.start_date & " #local.calendar_events.start_time#" />
			<cfset local.stop = local.calendar_events.stop_date & " #local.calendar_events.stop_time#">
			<cfset local.stop = $.date.applyLocalization(local.stop) />
			<cfset local.start = $.date.applyLocalization(local.start) />
			<!--- if start = stop, then make stop 30 minutes later --->
			<cfif local.stop eq local.start>
				<cfset local.stop = dateTimeFormat(dateAdd('n',30,local.stop),'mm/dd/yyyy HH:nn:ss') />
			</cfif>
			<cfset local.original_start = local.start />
			
			<cfset local.safety = 0 />
			<cfloop condition="#local.start# neq #local.stop#">
				<cfset local.safety++ />
				<cfif local.safety eq 300>
					<cfbreak />
				</cfif>
				<cfif structKeyExists(local.times,local.start)>
					<cfset local.times[local.start].id = local.calendar_events.id />
					<cfset local.times[local.start].name = local.calendar_events.description />
					<cfset local.times[local.start].type = 'calendar' />
					<cfset local.times[local.start].calendar_category = local.calendar_events.category />
					<cfset local.times[local.start].calendar_categories = local.calendar_events.event_categories />
					<cfset local.times[local.start].calendar_stop = local.stop />
					<cfset local.times[local.start].calendar_start = local.original_start />
				</cfif>
				<cfset local.start = dateTimeFormat(dateAdd('n',5,local.start),'mm/dd/yyyy HH:nn:ss') />
			</cfloop>
		</cfloop>

		<cfsavecontent variable="local.result">
			<script>
				$(document).ready(function(){
					Secretary.sound = #local.options.sound#;
					Secretary.speech = #local.options.speech#;
					Secretary.init();
				});
			</script>

			<div id="module-left-time-div" class="module-left-element moveable edit">
				<div id="secretary-edit" style="display:none;">
					#$.render.form(name="secretary_options_form",method="optionController.saveSecretaryOptions")#
						<input type="hidden" name="key" value="secretary" />
						<div class="widget-title sub first">Secretary Options</div>
						<cfsavecontent variable="local.chimebox">
							<input name="sound" value="1" type='checkbox' bubble='Play a chime sound for notifications.' <cfif local.options.sound eq 1>checked</cfif> />
						</cfsavecontent>
						<cfsavecontent variable="local.speechbox">
							<input name="speech" value="1" type='checkbox' bubble='Text-to-speech notifications.' <cfif local.options.speech eq 1>checked</cfif> />
						</cfsavecontent>
						#$.run.it('craftivityView.renderField',{name="Chime",field=local.chimebox})#
						#$.run.it('craftivityView.renderField',{name="Speech",field=local.speechbox})#
						<div class="buttons" style="margin:-1px -3px 15px -2px;">
							<button class="right red">Save</button>
							<button type="button" class="left grey small" style="margin-top:5px;" onclick="Secretary.hideOptions();">Cancel</button>
						</div>
					</form>
				</div>

				<audio id="secretaryNotification1" src="/assets/media/craftivity/secretary1.mp3"></audio>
				
				<div id="secretary-show">
					<i class="fa fa-gears secretary-options" onclick="Secretary.showOptions();"></i>
					<div class="module-left-title"><i style="font-size:14px;margin-right:5px;" class="fa fa-coffee"></i>Your Secretary</div>
					
					<table id="module-left-time-table" cellspacing="0" cellpadding="0">
						<tr class="module-left-title">
							<td colspan="10">
								<i class="fa fa-clock-o" style="font-size:15px;"></i>
								<span class="jstime-hour">#timeFormat(local.now,'h')#</span>:
								<span class="jstime-minute">#timeFormat(local.now,'mm')#</span>:
								<span class="jstime-second">#timeFormat(local.now,'ss')#</span>
								<span class="jstime-ampm">#timeFormat(local.now,'tt')#</span>
								&nbsp;-&nbsp;
								<span class="jstime-weekday">#dayOfWeekAsString(dayOfWeek(local.now))#</span>&nbsp;-&nbsp;
								<span class="jstime-month">#dateFormat(local.now,'m')#</span>/
								<span class="jstime-date">#dateFormat(local.now,'d')#</span>/
								<span class="jstime-year">#dateFormat(local.now,'yy')#</span>
							</td>
						</tr>
					</table>
					<table id="module-left-today-table" cellspacing="0" cellpadding="1">
						<cfset local.thisID = "x" />
						<cfloop array="#local.times.sort#" index="local.index" item="local.key">
							<cfset local.item = local.times[local.key] />
							<cfset local.i = local.key />
							<cfif local.thisID neq local.item.id>
								<!--- write the old event --->
								<cfif local.thisID neq "" and local.thisID neq "x">
									<cfset local.event.end = dateTimeFormat(dateAdd('n',local.event.duration,local.event.start),'mm/dd/yyyy HH:nn:ss') />
									<!--- calculate the end time. preserve original calendar end time if necessary --->
									<cfset local.conflict = false />
									<cfset local.end = local.event.end />
									<cfif local.event.type eq 'calendar' and local.event.end neq local.event.calendar_stop>
										<cfset local.conflict = true />
									</cfif>
									<tr id="#local.event.id#" datetime="#local.event.start#" datetimeend="<cfif local.event.type eq "calendar">#local.event.calendar_stop#<cfelse>#local.event.end#</cfif>">
										<cfif local.event.type eq 'calendar' and local.event.calendar_start neq local.event.start>
											<td class="today-start conflict" bubble="Conflict</br>Started #timeFormat(local.event.calendar_start)#">#timeFormat(local.event.start,"h:mm tt")#</td>
										<cfelse>
											<td class="today-start">#timeFormat(local.event.start,"h:mm tt")#</td>
										</cfif>
										<td class="today-description">
											<cfif local.event.type eq "calendar">
												<cfset local.category = "" />
												<cfif local.event.calendar_category neq 0 and listLen(local.event.calendar_categories) gte local.event.calendar_category>
													<cfset local.category = listGetAt(local.event.calendar_categories,local.event.calendar_category) />
												</cfif>
												<i class="fa fa-calendar cat#local.event.calendar_category#" <cfif local.category neq "">bubble="#local.category#"</cfif>></i>
											</cfif>
											#local.event.name#
										</td>
										<cfif local.conflict>
											<td class="today-end conflict" bubble="Conflict">until #timeFormat(local.event.calendar_stop,"h:mm tt")#</td>
										<cfelse>
											<td class="today-end">until #timeFormat(local.event.end,"h:mm tt")#</td>
										</cfif>
									</tr>
								</cfif>
								<!--- create a new event --->
								<cfset local.thisID = local.item.id />
								<cfset local.event = local.item />
								<cfset local.event.duration = 5 />
								<cfset local.event.start = local.i />
							<cfelse>
								<cfset local.event.duration = local.event.duration + 5 />
							</cfif>
						</cfloop>
						<tr datetime="none">
							<td style="text-align:center;">Nothing else today</td>
						</tr>
					</table>
					<div class="module-left-element-basebar"></div>
				</div>
			</div>
		</cfsavecontent>

		<cfreturn $.render.clean(local.result) />

	</cffunction>

	<!--- --->
	
	<cffunction name="getSecretaryDateTimeStruct" access="private" output="true" returntype="struct">
		<cfargument name="now" required='true' />

		<cfset var local = {} />
		
		<cfset local.start = dateTimeFormat(dateAdd('h',-18,arguments.now),'mm/dd/yyyy HH:00:00') />
		<cfset local.times = {} />
		<!--- local.sort keeps track of the sorting of date keys --->
		<cfset local.sort = [] />
		<cfloop from="1" to="450" index="local.i">
			<cfset arrayAppend(local.sort,local.start) />
			<cfset local.times[local.start] = {
				ID="",
				name="",
				type="" <!--- calendar or workweek --->
			} />
			<cfset local.start = dateTimeFormat(dateAdd('n',5,local.start),'mm/dd/yyyy HH:nn:ss') />
		</cfloop>
		
		<cfset local.times.sort = local.sort />
		<cfreturn local.times />

	</cffunction>

	<!--- --->
	
	<cffunction name="renderHelpWidget" access="public" output="true" returntype="string">

		<cfset var local = {} />
		
		<cfset local.title = "help" />
		
		<cfif cgi.script_name contains 'dashboard.cfm'>
			<cfset local.title = "Craftivity Tutorials" />
		<cfelseif cgi.script_name contains 'setup.cfm'>
			<cfset local.title = "Tutorials" />
		<cfelseif cgi.script_name contains 'calendar.cfm'>
			<cfset local.title = "Calendar Tutorials" />
		<cfelseif cgi.script_name contains 'goals.cfm'>
			<cfset local.title = "Goalsetting Tutorials" />
		<cfelseif cgi.script_name contains 'workweek.cfm'>
			<cfset local.title = "Workweek Designer Tutorials" />
		</cfif>

		<cfsavecontent variable="local.result">
			<script>
				toggleHelpVideo = function(button){
					var $button = $(button);
					var $help = $('##module-left-help-div');
					var $video = $help.find('iframe');
					var $controls = $help.find('.module-left-help-options');
					var $closeVideo = $help.find('i.fa-times');
					if($controls.hasClass('animating')){
						return;
					}
					$controls.addClass('animating');
					if($controls.hasClass('expanded')){
						$controls.removeClass('expanded');
						$controls.slideDown(200,function(){
							$controls.removeClass('animating');
						});
						$video.slideUp(200,function(){
							stopVimeo();
						});
						$closeVideo.hide();
					} else {
						$controls.addClass('expanded');
						$controls.slideUp(200,function(){
							$controls.removeClass('animating');
						});
						$video.slideDown(200,function(){
							playVimeo();
							var tourKey = $video.attr('key');

							$button.find('i.fa-check').show();
							Ajax.run({
								method:"craftivityService.saveHopscotchFinish",
								args:{tourKey:tourKey}
							});
						});
						$closeVideo.fadeIn();
					}
				};	
			</script>
			
			<cfsavecontent variable="local.links">
				#renderHopscotchLinksByPage()#
				<!--- #renderVideoLinkByPage()# --->
			</cfsavecontent>
			
			<cfif $.render.clean(local.links) eq "">
				<cfreturn "" />
			</cfif>
			
			<div id="module-left-help-div" class="module-left-element moveable">
				<div class="module-left-title"><i style="font-size:14px;margin-right:5px;" class="fa fa-question-circle"></i>#local.title#</div>
					<div class="module-left-help-options" style="position:relative;">
						#local.links#
					</div>
					#renderVideoByPage()#
					<i class="fa fa-times" onclick="toggleHelpVideo(this);"></i>
				<div class="module-left-element-basebar"></div>
			</div>
		</cfsavecontent>

		<cfreturn $.render.clean(local.result) />

	</cffunction>

	<!--- --->
	
	<cffunction name="renderHopscotchLinksByPage" access="public" output="true" returntype="string">

		<cfset var local = {} />
		
		<cfset local.options = $.run.it('optionService.getOptions',{key='hopscotch'}) />
		<cfset local.calendarOptions = $.run.it('optionService.getOptions',{key='calendar'}) />

		<cfsavecontent variable="local.result">
			<cfif cgi.script_name contains 'dashboard.cfm'>
				<!--- start the first tour if haven't started before --->
				#renderHopscotchLink(name="What is Craftivity?",key="dashboard1",start="true")#
				<!--- <div class="module-left-help">
					<i class="fa fa-question-circle"></i>
					Introduction to Widgets
				</div> --->
			<cfelseif cgi.script_name contains 'setup.cfm'>
				<!--- <div class="module-left-help">
					<i class="fa fa-question-circle"></i>
					Whats this page about?
				</div> --->
			<cfelseif cgi.script_name contains 'calendar.cfm'>
				#renderHopscotchLink(name="Overview",key="calendar1",start="true")#
				<cfif local.calendarOptions.refresh_token eq "">
					#renderHopscotchLink(name="Google Calendar",key="calendar2")#
				<cfelse>
					#renderHopscotchLink(name="Google Calendar",key="calendar3",start="true")#
				</cfif>
				<!--- <div class="module-left-help">
					<i class="fa fa-question-circle"></i>
					How to use the calendar page
				</div>
				<div class="module-left-help">
					<i class="fa fa-question-circle"></i>
					Creating and editing events
				</div> --->
			<cfelseif cgi.script_name contains 'goals.cfm'>
				#renderHopscotchLink(name="Overview",key="goal1",start="true")#
				<!--- <div class="module-left-help">
					<i class="fa fa-question-circle"></i>
					About the Goals and Milestones page
				</div>
				<div class="module-left-help">
					<i class="fa fa-question-circle"></i>
					Creating milestones
				</div>
				<div class="module-left-help">
					<i class="fa fa-question-circle"></i>
					Scheduling Action Plans
				</div>
				<div class="module-left-help">
					<i class="fa fa-question-circle"></i>
					Present, past, and future goals
				</div> --->
			<cfelseif cgi.script_name contains 'workweek.cfm'>
				#renderHopscotchLink(name="Overview",key="workweek1",start="true")#
				<!--- <div class="module-left-help">
					<i class="fa fa-question-circle"></i>
					Introduction to the Workweek Designer
				</div>
				<div class="module-left-help">
					<i class="fa fa-question-circle"></i>
					How to create a Workweek Action
				</div>
				<div class="module-left-help">
					<i class="fa fa-question-circle"></i>
					Customing the Workweek Designer
				</div> --->
			</cfif>
		</cfsavecontent>

		<cfreturn $.render.clean(local.result) />

	</cffunction>

	<!--- --->
	
	<cffunction name="renderHopscotchLink" access="public" output="true" returntype="string">
		<cfargument name="name" required="true" />
		<cfargument name="key" required="true" />
		<cfargument name="start" required="false" default="false" />

		<cfset var local = {} />
		
		<cfset local.options = $.run.it('optionService.getOptions',{key="hopscotch"}) />
		
		<cfsavecontent variable="local.result">
			<script>				
				<cfif arguments.start and local.options[arguments.key] eq false>
					HopscotchTours.startTour('#arguments.key#');
				</cfif>
			</script>
			<div class="module-left-help" key="#arguments.key#" onclick="HopscotchTours.startTour('#arguments.key#');">
				<i class="fa fa-question-circle"></i>
				#arguments.name#
				<i class="fa fa-check" style="<cfif local.options['#arguments.key#_fin'] eq "">display:none;</cfif>color:rgb(91, 192, 91);left:0px;top:3px;position:absolute;" bubble="Finished on #local.options['#arguments.key#_fin']#"></i>
			</div>
		</cfsavecontent>

		<cfreturn $.render.clean(local.result) />

	</cffunction>

	<!--- --->
	
	<cffunction name="renderHopscotchVideoLink" access="public" output="true" returntype="string">
		<cfargument name="name" required="true" />
		<cfargument name="key" required="true" />
		<cfargument name="options" required="true" />

		<cfset var local = {} />
		
		<cfset local.options = arguments.options />
		
		<cfsavecontent variable="local.result">
			<div class="module-left-help" onclick="toggleHelpVideo(this);">
				<i class="fa fa-film"></i>
				#arguments.name#
				<i class="fa fa-check" style="<cfif local.options['#arguments.key#_fin'] eq "">display:none;</cfif>color:rgb(91, 192, 91);left:0px;top:3px;position:absolute;" bubble="Finished on #local.options['#arguments.key#_fin']#"></i>
			</div>
		</cfsavecontent>

		<cfreturn $.render.clean(local.result) />

	</cffunction>

	<!--- --->
	
	<cffunction name="renderVideoLinkByPage" access="public" output="true" returntype="string">

		<cfset var local = {} />
		
		<cfreturn "">
		
		<cfset local.options = $.run.it('optionService.getOptions',{key='hopscotch'}) />
		
		<cfsavecontent variable="local.result">
			<cfif cgi.script_name contains 'dashboard.cfm'>
				#renderHopscotchVideoLink(name="Welcome to Craftivity",key="dashboardVid1",options=local.options)#
			<cfelseif cgi.script_name contains 'calendar.cfm'>
				#renderHopscotchVideoLink(name="How to use the Calendar",key="calendarVid1",options=local.options)#
			<cfelseif cgi.script_name contains 'goals.cfm'>
				#renderHopscotchVideoLink(name="Setting Goals",key="goalVid1",options=local.options)#
			<cfelseif cgi.script_name contains 'workweek.cfm'>
				#renderHopscotchVideoLink(name="Managing your wokrweek",key="workweekVid1",options=local.options)#
			</cfif>
		</cfsavecontent>

		<cfreturn $.render.clean(local.result) />

	</cffunction>

	<!--- --->
	
	<cffunction name="renderVideoByPage" access="public" output="true" returntype="string">

		<cfset var local = {} />
		
		<cfsavecontent variable="local.result">
			<cfif cgi.script_name contains 'dashboard.cfm'>
				#renderVimeo(id="115743355",width="287",height="210",key="dashboardVid1")#
			<cfelseif cgi.script_name contains 'calendar.cfm'>
				#renderVimeo(id="115743356",width="287",height="210",key="calendarVid1")#
			<cfelseif cgi.script_name contains 'goals.cfm'>
				#renderVimeo(id="115743357",width="287",height="188",key="goalVid1")#
			<cfelseif cgi.script_name contains 'workweek.cfm'>
				#renderVimeo(id="115743358",width="287",height="165",key="workweekVid1")#
			</cfif>
		</cfsavecontent>

		<cfreturn $.render.clean(local.result) />

	</cffunction>

	<!--- --->
	
	<cffunction name="renderVimeo" access="public" output="true" returntype="string">
		<cfargument name="id" required="true" />
		<cfargument name="width" required="true" />
		<cfargument name="height" required="true" />
		<cfargument name="key" required="true" />
		
		<cfset var local = {} />
		
		<cfreturn "" /
					>
		<cfsavecontent variable="local.result">
			<!--- froogaloop js player controls --->
			
			<iframe key="#arguments.key#" style="display:none;" id="helpVideo" src="//player.vimeo.com/video/#arguments.id#?api=1" width="#arguments.width#" height="#arguments.height#" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe>
			<script>
				playVimeo = function(){
					var $player = getVimeo();
					$player.addEvent('finish',function(){
						toggleHelpVideo();
					});
					$player.api('play');
					
				};
				getVimeo = function(){
					var iframe = $('##helpVideo')[0];
					return $f(iframe);
				};
				stopVimeo = function(){
					var $player = getVimeo();
					$player.api('pause');
				};
			</script>
		</cfsavecontent>

		<cfreturn $.render.clean(local.result) />

	</cffunction>

	<!--- --->

	<cffunction name="renderUpcomingMilestones" access="public" output="true" returntype="string">

		<cfset var local = {} />
		
		<cfset local.maturemilestones = $.run.it("goalService.getMilestones",{
			enddate=dateAdd('d', 1, $.date.getDate()),
			complete=false,
			locked="0,1",
			goalAbandoned=false
		}) />
		
		<!--- sort same goals together --->
		<cfset local.matureGoalIDs = {} />
		<cfset local.matureGoals = [] />
		<cfloop query="local.matureMilestones">
			<cfif not structKeyExists(local.matureGoalIDs,local.matureMilestones.goal_id)>
				<!--- add to array --->
				<cfset local.goal = {
					id=local.matureMilestones.goal_id,
					name=local.matureMilestones.goal_name,
					unit=local.matureMilestones.goal_unit,
					measurable=local.matureMilestones.goal_measurable,
					milestones=[]
				} />
				<cfset arrayAppend(local.matureGoals,local.goal) />
				<!--- log id to array--->
				<cfset local.matureGoalIDs[local.matureMilestones.goal_id] = arrayLen(local.matureGoals) />
			</cfif>
			<!--- sort the milestones to array --->
			<cfset local.milestone = {
				date=local.matureMilestones.date,
				description=local.matureMilestones.description,
				complete=local.matureMilestones.complete,
				target_count=local.matureMilestones.target_count,
				actual_count=local.matureMilestones.actual_count,
				id=local.matureMilestones.id,
				locked=local.matureMilestones.locked
			} />
			<cfset local.arrayAt = local.matureGoalIDs[local.matureMilestones.goal_id] />
			<cfset arrayAppend(local.matureGoals[local.arrayAt].milestones,local.milestone) />
		</cfloop>
		
		<cfset local.upcomingmilestones = $.run.it("goalService.getMilestones",{
			startdate=dateAdd('d',1,$.date.getDate()),
			enddate=dateAdd('d', 45, $.date.getDate()),
			complete=false,
			locked="0,1",
			goalAbandoned=false
		}) />
		
		<!--- sort same goals together --->
		<cfset local.upcomingGoalIDs = {} />
		<cfset local.upcomingGoals = [] />
		<cfset local.upcomingCount = 0 />
		<cfloop query="local.upcomingMilestones">
			<cfif not structKeyExists(local.upcomingGoalIDs,local.upcomingMilestones.goal_id)>
				<!--- add to array --->
				<cfset local.goal = {
					id=local.upcomingMilestones.goal_id,
					name=local.upcomingMilestones.goal_name,
					unit=local.upcomingMilestones.goal_unit,
					measurable=local.upcomingMilestones.goal_measurable,
					milestones=[]
				} />
				<cfset arrayAppend(local.upcomingGoals,local.goal) />
				<!--- log id to array--->
				<cfset local.upcomingGoalIDs[local.upcomingMilestones.goal_id] = arrayLen(local.upcomingGoals) />
			</cfif>
			<!--- sort the milestones to array --->
			<cfset local.milestone = {
				date=local.upcomingMilestones.date,
				description=local.upcomingMilestones.description,
				complete=local.upcomingMilestones.complete,
				target_count=local.upcomingMilestones.target_count,
				actual_count=local.upcomingMilestones.actual_count,
				id=local.upcomingMilestones.id,
				locked=local.upcomingMilestones.locked
			} />
			<cfset local.arrayAt = local.upcomingGoalIDs[local.upcomingMilestones.goal_id] />
			<!--- only allow 3 upcoming per goal --->
			<cfif arrayLen(local.upcomingGoals[local.arrayAt].milestones) lte 2>
				<cfset arrayAppend(local.upcomingGoals[local.arrayAt].milestones,local.milestone) />
				<cfset local.upcomingCount++ />
			</cfif>
		</cfloop>

		<cfsavecontent variable="local.result">
			<div id="module-left-milestones-div" class="module-left-element first moveable">

				<div class="module-left-title"><i class="fa fa-crosshairs" style="color:rgb(231,80,80);margin-left:-12px;"></i>My Milestones (#local.matureMilestones.recordcount+local.upcomingCount#)</div>
				
				<cfif arrayLen(local.matureGoals) gt 0>
					<fieldset style="border:1px dashed ##ADADAD;">
						<legend>#local.matureMilestones.recordcount# Past and Current</legend>
						<div style="max-height:190px;overflow-y:auto;overflow-x:hidden;">
							<cfloop array="#local.matureGoals#" index="local.i" item="local.goal">
								<div class="widget-title sub" style="margin:8px 4px -5px 4px;padding-left:4px;padding:0px;border-top-right-radius:4px;border-top-left-radius:4px;">
									<div style="font-size:10px;text-align:center;line-height:16px;font-weight:bold;">#local.goal.name#</div>
								</div>
								<cfloop array="#local.goal.milestones#" index="local.j" item="local.milestone">
									<div <cfif local.j gt 1>style="margin-top:-5px;"</cfif>>
									#$.run.it('goalView.renderMilestone',{
										milestoneID=local.milestone.id,
										goalID=local.goal.id,
										date=local.milestone.date,
										description=local.milestone.description,
										complete=local.milestone.complete,
										locked=local.milestone.locked,
										editable=true,
										measurable=local.goal.measurable,
										unit=local.goal.unit,
										target_count=local.milestone.target_count,
										actual_count=local.milestone.actual_count
									})#
									</div>
								</cfloop>
							</cfloop>
						</div>
					</fieldset>
				</cfif>
				
				<cfif local.upcomingmilestones.recordcount gt 0>
					<fieldset style="border:1px dashed ##CFCFCF">
						<legend>#local.upcomingCount# Upcoming</legend>
						<div style="max-height:190px;overflow-y:auto;overflow-x:hidden;">
							<cfloop array="#local.upcomingGoals#" index="local.i" item="local.goal">
								<div class="widget-title sub" style="margin:8px 4px -5px 4px;padding-left:4px;padding:0px;border-top-right-radius:4px;border-top-left-radius:4px;">
									<div style="font-size:10px;text-align:center;line-height:16px;font-weight:bold;">#local.goal.name#</div>
								</div>
								<cfloop array="#local.goal.milestones#" index="local.j" item="local.milestone">
									<div <cfif local.j gt 1>style="margin-top:-5px;"</cfif>>
									#$.run.it('goalView.renderMilestone',{
										milestoneID=local.milestone.id,
										goalID=local.goal.id,
										date=local.milestone.date,
										description=local.milestone.description,
										complete=local.milestone.complete,
										locked=local.milestone.locked,
										editable=true,
										measurable=local.goal.measurable,
										unit=local.goal.unit,
										target_count=local.milestone.target_count,
										actual_count=local.milestone.actual_count
									})#
									</div>
								</cfloop>
							</cfloop>
						</div>
					</fieldset>
				</cfif>
				
				<div class="module-left-element-basebar"></div>
			</div>
		</cfsavecontent>

		<cfreturn $.render.clean(local.result) />

	</cffunction>

	<!--- --->
	
	<cffunction name="renderChangeLog" access="public" output="true" returntype="string">

		<cfset var local = {} />
	
		<cfsavecontent variable="local.result">
			<div id="module-left-changelog-div" class="module-left-element first moveable">
				<div class="module-left-title"><i class="fa fa-rocket" style="font-size:14px;"></i>Craftivity Progress</div>
				
				<div class="changelog-contents">
				<div class="changelog-title">4/09/2015 - version 1.4.6</div>
					<div class="changelog-details">
						<div>- iOS companion app beta testing</div>
						<div>- Android companion app 95% complete</div>
						<div>- Various bug fixes</div>
					</div>
					
					<div class="changelog-title">3/19/2015 - version 1.4.5</div>
					<div class="changelog-details">
						<div>- iOS companion app 95% complete</div>
						<div>- Android companion app 85% complete</div>
						<div>- Revamped timezone logic</div>
						<div>- Various bug fixes</div>
					</div>
					
					<div class="changelog-title">3/4/2015 - version 1.4.4</div>
					<div class="changelog-details">
						<div>- iOS companion app 85% complete</div>
						<div>- Android companion app 60% complete</div>
						<div>- Various bug fixes</div>
					</div>
					
					<div class="changelog-title">2/25/2015 - version 1.4.3</div>
					<div class="changelog-details">
						<div>- Various bug fixes</div>
						<div>- Beta signup code no longer required (open beta)</div>
						<div>- Button to force resyncing Google Calendar</div>
						<div>- Email communication enhancements</div>
						<div>- Ability to unsubscribe from emails</div>
					</div>
					
					<div class="changelog-title">2/12/2015 - version 1.4.1</div>
					<div class="changelog-details">
						<div>- Support/Feedback tool now fully asynchronous (will not force page reload)</div>
						<div>- Support/Feedback suggestions now allow viewing messages</div>
						<div>- Datepicker unavailable dates now show up reddish</div>
						<div>- Datepicker clicking on already selected date will no longer deselect</div>
						<div>- Milestone preview blocks now color as you complete milestones</div>
					</div>
					
					<div class="changelog-title">2/9/2015 - version 1.4.0</div>
					<div class="changelog-details">
						<div>- Measureable Goals</div>
						<div>- Numeric milestones and progress tracking</div>
						<div>- Milestone Widget groups milestones from same goal</div>
						<div>- Milestone Widget editable</div>
					</div>
					
					<div class="changelog-title">2/5/2015 - version 1.3.7</div>
					<div class="changelog-details">
						<div>- Calendar categories edit moved to options</div>
						<div>- Secretary toggle speech option</div>
					</div>
					
					<div class="changelog-title">2/5/2015 - version 1.3.6</div>
					<div class="changelog-details">
						<div>- Changelog widget added</div>
						<div>- Calendar. Saving or delete an event no longer refreshes the page.</div>
						<div>- Calendar. Button to load more days in the calendar.</div>
					</div>
				</div>
				
				<div class="module-left-element-basebar"></div>
			</div>
		</cfsavecontent>

		<cfreturn $.render.clean(local.result) />

	</cffunction>

	<!--- --->

</cfcomponent>